<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分区标签</title>
    <style>
        table {
            border: 2px solid green;
            width: 500px;
            /* 控制表格列宽：默认值是auto,会根据内容撑起来 */
            table-layout: fixed;
            /* 控制单元格间距 */
            border-spacing: 0px;
            /* 合并相邻单元格的边框 */
            border-collapse: collapse;
        }
        td,th {
            border: 2px orange solid;
        }
    </style>
</head>
<body>
    <!-- 1. 行内分区元素:不换行,用于选中一行中的一部分内容 -->
    春天已经来到,你出门<span style="color: green;">踏青</span>了吗?<br>
    <!-- 要求: 小可爱-红  JSDTN2412-绿 第三阶段-蓝 -->
    欢迎各位<span style="color:red;">小可爱</span>进入<span style="color:green;">
    JSDTN2412</span>班级的<span style="color:blue;">第三阶段</span>学习!<br>
    <!-- 2.块级分区元素 独占一行 div作为典型代表,默认宽度为父级宽度的100%,高度为0靠内容撑起来   -->
    <div></div><br><hr>
    <table>
        <thead>
            <tr>
                <th>产品名称</th>
                <th>价格</th>
                <th>库存</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>笔记本电脑</td>
                <td>¥5999</td>
                <td>10</td>
            </tr>
            <tr>
                <td>平板电脑</td>
                <td>¥2999</td>
                <td>15</td>
            </tr>
            <tr>
                <td>智能手机</td>
                <td>¥3999</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
    <br>
    <table>
        <tr>
            <td>1-1</td><td>1-2</td><td>1-3</td><td>1-4</td>
        </tr>
        <tr>
            <td>2-1</td>
            <!-- 跨列:横着合并,从当前单元格开始,向右合并n个单元格,n包含当前单元格,被合并的单元格一定得删掉! -->
            <td colspan="2">2-2</td>
            <!-- <td>2-3</td>-->
            <!-- 跨行:竖着合并,从当前单元格开始,向下合并n个单元格,n包含当前单元格,被合并的单元格一定得删掉! -->
            <td rowspan="3">2-4</td>
        </tr>
        <tr>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
<!--            <td>3-4</td>-->
        </tr>
        <tr>
            <td>4-1</td>
            <td>4-2</td>
            <td>4-3</td>
<!--            <td>4-4</td>-->
        </tr>
    </table><br>
    <table>
        <caption>购物车</caption>
        <tr>
            <th>商品名称</th>
            <th>商品编号</th>
            <th>商品价格</th>
        </tr>
        <tr>
            <td>1</td>
            <td>荣耀X60</td>
            <td>2601</td>
        </tr>
        <tr>
            <td>2</td>
            <td>三折叠</td>
            <td>27399</td>
        </tr>
        <tr>
            <td>总价</td>
            <td colspan="2">30000</td>
        </tr>
    </table>
</body>
</html>